<template>
    <BaseComposite :config="config" :refreshEditor="refreshEditor" @updateData="updateData">
        <el-link href="https://gitee.com/renlin901017/rl-plus-docs/blob/master/docs/BaseSwitch.md" target="_blank" type="primary">更多用法请参考文档</el-link>
        <!-- template -->
        <div class="item template">
            <p class="label">~ 使用 ~</p>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p @click="copyText(BaseHtml)">{{BaseHtml}}</p>
            </el-tooltip>
        </div>
        <!-- 基础用法 -->
        <BaseItem label="基础用法" :text="BaseScript">
            <BaseSwitch :config="BaseConfig" v-model:value="BaseConfig.value"></BaseSwitch>
        </BaseItem>
        <!-- 其他用法 -->
        <BaseItem label="其他用法" :text="OtherScript">
            <BaseSwitch :config="OtherConfig" v-model:value="OtherConfig.value"></BaseSwitch>
        </BaseItem>
        <!-- 自定义设置 -->
        <div class="item">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p class="custom" @click="copyText(JsonToString(config))">自定义设置</p>     
            </el-tooltip>
            <BaseSwitch :key="config" :config="config" v-model:value="config.value"></BaseSwitch>
        </div>         
        <template #props>
            <BaseForm :config="formConfig" :key="formConfig" ref="myForm">                
                <div class="btns">                    
                    <el-button type="primary" @click="useConfig" :auto-insert-space="true">应用</el-button>
                    <el-button @click="reset" :auto-insert-space="true">重置</el-button>
                </div>
            </BaseForm>         
        </template>
    </BaseComposite>
</template>
<script lang="ts" setup>
import { ref, isRef, reactive,nextTick } from 'vue';
import BaseComposite from '@/components/BaseComposite';
import BaseItem from '@/components/BaseItem';
import { ElButton, ElTooltip, ElLink} from "element-plus";
import dictJson from '@/assets/json';
import { BaseSwitch, BaseSwitchType, BaseForm,BaseFormType, BaseFormItemEleType, GroupComsType, InputValue } from 'rl-plus';
import { deepClone, JsonToString } from 'rl-utils';
import { copyText } from '../../utils/index';
const BaseHtml = `<BaseSwitch :config="config" v-model:value="config.value" />`
// 基础用法
const BaseScript = `
import { ref} from 'vue';
import { BaseSwitch, BaseSwitchType} from 'rl-plus';
const config = ref<BaseCheckboxType>({
    value: false
})
`
const BaseConfig=ref<BaseSwitchType>({
    value: false
})
// 其他用法
const OtherScript = `
import { ref} from 'vue';
import { BaseSwitch, BaseSwitchType} from 'rl-plus';
const config = ref<BaseCheckboxType>({
    value: false,
    class:"item-custom",
    style:"padding:10px;background:#f5f5f5",
})
`
const OtherConfig=ref<BaseSwitchType>({
    value: false,
    class:"item-custom",
    style:"padding:10px;background:#f5f5f5",
})
// 初始化
const config = ref<BaseSwitchType>({
    value: false
})
// 备份数据
const initData = deepClone(config.value)
// 刷新JsonEditor
const refreshEditor = ref(true)
// form表单
const formConfig = reactive<BaseFormType>({
    eleType: GroupComsType.BASEFORM,
    labelWidth:300,
    config: [
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'loading',
            value:false,
            label: '是否显示加载中',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'width',
            value:null,
            label: 'switch 的宽度',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'inlineIrompt',
            value:false,
            label: '只会呈现文本的第一个字符',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'activeText',
            value:null,
            label: 'switch 打开时的文字描述',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'inactiveText',
            value:null,
            label: 'switch 的状态为 off 时的文字描述',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'activeColor',
            value:'',
            label: '当在 on 状态时的背景颜色',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'inactiveColor',
            value:'',
            label: 'off 状态时的背景颜色',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'borderColor',
            value:'',
            label: '开关的边框颜色',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'name',
            value:'',
            label: 'switch 对应的 name 属性',
        },
        {
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'disabled',
            value:false,
            label: '禁用'
        },{
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'size',
            value:'',
            label: '尺寸',
            data: dictJson.sizes
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'class',
            value:'',
            label: '类'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'style',
            value:'',
            label: '样式'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'validateEvent',
            value:true,
            label: '输入时是否触发表单的校验',
        }
    ]
})
const myForm=ref(null)

// 白名单（该属性默认为true）
const propsConfig=['validateEvent']
const useConfig = () => {
    if (myForm.value) {
        let newData = deepClone(myForm.value.newData)
        const dataKeys = Object.keys(newData)
        dataKeys.map(item => {
            if (!newData[item]&&!propsConfig.includes(item)) { 
                delete newData[item]
            }
        })
        if (Object.keys(newData).length > 0) {
            config.value = {...initData,...newData}
            refreshEditor.value = false
            nextTick(() => {
                refreshEditor.value = true
            })
        } else { 
            reset()
        }
    }
}
const reset = () => { 
    config.value = initData
    refreshEditor.value = false
    nextTick(() => {
        myForm.value.resetForm()
        refreshEditor.value = true
    })
}
// JsonEditor数据同步
const updateData = (e) => { 
    config.value=isRef(e)&&e.value||e
}
</script>
<style lang="scss" scoped>
    @import "../../assets/css/index.scss";
    .tip{
        color: #999;
        text-align: center;
        padding: 10px;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
</style>